<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title th:text="${title}"></title>
    <link rel="icon" href="/global/img/core-img/favicon.ico">
    <link rel="stylesheet" href="/global/css/style.css">
    <link rel="stylesheet" href="/global/css/log.css">
    <link rel="stylesheet" href="/global/video-js/video-js.min.css">
    <link rel="stylesheet" href="/global/css/swiper.min.css">
</head>
<body>
<div th:include="public::topbar"></div>
<div class="container">
    <div id="voice_devices">
        <div th:fragment="devices-list" class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" th:each="device:${devices}">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title" th:text="${device.name}"></h4>
                            <p class="card-text" th:text="${device.info}"></p>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-primary" th:data-id="${device.name}"
                                        onclick="addPOIMarker(this.getAttribute('data-id'))">Location
                                </button>
                                <button type="button" class="btn btn-info"
                                        th:data-url="'/api/res/live/' + ${device.getLabel()} + '.m3u8'"
                                        onclick="playVideo(this.getAttribute('data-url'))">Play
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div name="map" id="voice_map" class="mt-2"></div>
    <div class="jumbotron">
        <h1>External interface definition</h1>
        <h2>1. Device Location</h2>
        <p>Regularly report location information and additional information through PUT method.</p>
        <h4>URI: /rst/lab/voice/device</h4>
        <h4>parameter:</h4>
        <p><b>name</b>: Device name (requires Base64 coding)</p>
        <p><b>info</b>: Additional information (requires Base64 coding)</p>
        <p><b>long</b>: Longitude of the device position</p>
        <p><b>lat</b>: Latitude of the device location</p>
        <h5>example:</h5>
        <p>/rst/lab/voice/device?name=dGFueGu&info=dGFueGu&lat=116.391467&lon=39.927761</p>
        <h2>2.Video streaming</h2>
        <p>Push the stream through RTMP and push the stream address rtmp: //www.iamray.cn/stream/name.</p>
        <p>Where <b>name</b> is the same value in location interface(requires Base64 coding)</p>
    </div>
</div>
<div th:include="public::bottombar"></div>
<div class="subscribe-newsletter-area">
    <div class="modal fade" id="videomodal" tabindex="-1" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <div class="modal-body">
                    <h5 class="title">Live</h5>
                    <div class="modal-div"></div>
                    <div class="newsletterForm">
                        <button type="button" class="btn original-btn" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/global/js/jquery-2.2.4.min.js"></script>
<script src="/global/js/jquery.base64.min.js"></script>
<script src="/global/js/popper.min.js"></script>
<script src="/global/bootstrap/js/bootstrap.min.js"></script>
<script src="/global/video-js/video.min.js"></script>
<script src="/global/video-js/videojs-contrib-hls.min.js"></script>
<script src="/global/js/plugins.js"></script>
<script src="/global/js/active.min.js"></script>
<script src="/global/js/events.min.js"></script>
<script src="/global/js/map.min.js"></script>
<script src="/global/js/swiper.min.js"></script>
</body>
</html>
